
$(function() {
	
	$(".box1").on("click", function() {
		console.log("box1")
	})
	$(".box2").on("click", function(e) {
		e.stopPropagation()
		console.log("box2")
	})
	$(".box3").on("click", function(event) {
		event.stopPropagation()
		console.log("box3")
	})
	
	
	
	/*
	function fn() {
		$(this).addClass("red")
	}
	
	$(".box3").on("mouseenter", fn)
	// $(".box3").on("mouseleave", function() {
	$(".box3").one("mouseleave", function() {
		$(this).removeClass("red")
		console.log("1")
		// $(".box3").off("mouseenter", fn)
	})
	
	
	$(".box3").hover(function() {
		$(this).addClass("red")
	}, function() {
		$(this).removeClass("red")
	})
	
	
	$(".box3").on("mouseenter", function() {
		$(this).addClass("red")
	})
	$(".box3").on("mouseleave", function() {
		$(this).removeClass("red")
	})
	
	// $(".box3").mouseenter(function() {
	$(".box3").mouseover(function() {
		$(this).addClass("red")
	})
	// $(".box3").mouseleave(function() {
	$(".box3").mouseout(function() {
		$(this).removeClass("red")
	})
	*/
	
	
})




